<template>
  <div class="history_query_wrapper">
    <a-card>
      <a-form layout="inline">
        <a-form-item>
          <a-input
            style="width:220px;
                font-size:14px;
                font-family:Microsoft YaHei;
                color:rgba(190,194,201,1)"
            placeholder="请输入医院名称"
            v-model="formParam.orgName"
          >
            <a-icon slot="suffix" type="search" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-date-picker
            v-model="formParam.execTime"
            :allowClear="false"
            style="width:240px;"
            placeholder="时间"
            valueFormat="YYYY-MM-DD"/>
        </a-form-item>
        <a-form-item>
          <a-button
            style="margin-left: 30px;"
            @click="handleFormulaSearch"
            icon="search"
            type="primary"
          >查询</a-button>
          <a-button
            style="margin-left: 30px;"
            @click="()=>{this.formParam={execTime:this.getCurrentDate()};this.handleFormulaSearch()}"
            icon="sync"
          >重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <div class="table_wrapper">
      <a-table
        :key="tableKey"
        :columns="columns"
        :pagination="tablePagination"
        :data-source="tableData"
        class="components-table-demo-nested"
        :loading="tableLoading"
        :defaultExpandAllRows="true"
        :expandRowByClick="true"
        :expandIconAsCell="false"
        :expandIconColumnIndex="6">
        <a-table
          slot="expandedRowRender"
          slot-scope="record"
          :columns="innerColumns"
          :data-source="record.detail"
          :pagination="false">
          <template slot="ruleType" slot-scope="text">{{ ruleTypeLabel[text] }}</template>
          <a slot="action" slot-scope="item" @click="tableItemClick(item)">明细</a>
        </a-table>
      </a-table>
    </div>

    <transition name="hehe">
      <div class="basic_info_wrapper" v-show="showDetailLayout">
        <detailInfo @closeDetailPage="closeDetailPage" :rowData="rowData"/>
      </div>
    </transition>
  </div>
</template>

<script>
import { querySummary } from '@/api/home'
import detailInfo from '@/views/dataQuality/home/components/detailInfo'
export default {
  props: {},
  data () {
    const _this = this
    return {
      ruleTypeLabel: {
        1: '一致性',
        2: '完整性',
        3: '及时性',
        4: '规范性'
      },
      formParam: {
        orgName: undefined,
        execTime: undefined
      },
      columns: [
        {
          title: '医院名称',
          dataIndex: 'orgName',
          align: 'center',
          ellipsis: true
        },
        {
          title: '得分',
          dataIndex: 'ruleScore',
          align: 'center',
          ellipsis: true
        },
        {
          title: '总数据数',
          dataIndex: 'allDataCount',
          align: 'center',
          ellipsis: true
        },
        {
          title: '昨日数据数',
          dataIndex: 'yesterdayData.allDataCount',
          align: 'center',
          ellipsis: true
        },
        {
          title: '异常数据数',
          dataIndex: 'errDataCount',
          align: 'center',
          ellipsis: true
        },
        {
          title: '昨日异常数',
          dataIndex: 'yesterdayData.errDataCount',
          align: 'center',
          ellipsis: true
        },
        {
          title: '',
          dataIndex: '',
          align: 'center',
          ellipsis: true
        }
      ],
      innerColumns: [
        {
          title: '规则类型',
          dataIndex: 'ruleType',
          align: 'center',
          scopedSlots: { customRender: 'ruleType' },
          ellipsis: true
        },
        {
          title: '权重',
          dataIndex: 'fixedWeight',
          align: 'center',
          ellipsis: true
        },
        {
          title: '参与计算总数',
          dataIndex: 'total',
          align: 'center',
          ellipsis: true
        },
        {
          title: '异常数据数',
          dataIndex: 'errorCount',
          align: 'center',
          ellipsis: true
        },
        {
          title: '得分',
          dataIndex: 'ruleScore',
          align: 'center',
          ellipsis: true
        },
        {
          title: '',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '',
          dataIndex: '',
          align: 'center',
          ellipsis: true
        }
      ],
      tableData: [],
      tablePagination: {
        position: 'bottom',
        pageNum: 1,
        pageSize: 10,
        showSizeChanger: true, // 显示可改变每页数量
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30', '40', '50'], // 每页数量选项
        showTotal: total => `共 ${total} 条记录`, // 显示总数
        showQuickjumper: false,
        onShowSizeChange: (current, pageSize) => {
          _this.tablePagination.pageSize = pageSize
          _this.tablePagination.pageNum = current
          _this.requestTableData()
        },
        onChange: (current, pageSize) => {
          _this.tablePagination.pageSize = pageSize
          _this.tablePagination.pageNum = current
          _this.requestTableData()
        },
        total: 0
      },
      tableLoading: false,
      tableKey: 0,
      showDetailLayout: false,
      rowData: {
        batchNo: '',
        createTime: '',
        errorCount: 0,
        execId: '',
        execTime: '',
        fixedWeight: 0,
        formulaId: '',
        formulaName: '',
        id: '',
        notFixedScore: 0,
        orgId: '',
        orgName: '',
        passTotal: 0,
        ruleId: '',
        ruleName: '',
        ruleScore: 0,
        ruleType: '',
        ruleWeight: 0,
        total: 0,
        valErrDataId: ''
      }
    }
  },
  components: {
    detailInfo
  },
  computed: {},
  watch: {},
  methods: {
    getCurrentDate: function () {
      const date = new Date()
      return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate())
    },
    handleFormulaSearch: function () {
      this.tablePagination.pageNum = 1
      this.requestTableData()
    },
    requestTableData () {
      this.tableLoading = true
      querySummary(this.formParam, this.tablePagination.pageNum, this.tablePagination.pageSize).then((res) => {
        // this.tableData = res.data.rows
        this.tableData = res.data.rows.map((item, index) => {
          item.detail = item.detail.map((sonItem, sonIndex) => {
            return { ...sonItem, key: sonIndex }
          })
          return { ...item, key: index }
        })
        this.tablePagination.total = res.data.total
        this.tableKey = 1
        const queryPageNum = this.tablePagination.pageNum
        if (queryPageNum > 1 && (res.data.rows == null || res.data.rows.length === 0)) {
          this.tablePagination.pageNum = 1
          this.requestTableData()
        }
      }).catch((err) => {
        console.log(err)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    tableItemClick (item) {
      console.log(item)
      this.showDetailLayout = true
      this.rowData = item
    },
    closeDetailPage () {
      this.showDetailLayout = false
    }
  },
  created () {
    this.formParam.execTime = this.getCurrentDate()
    this.requestTableData()
  },
  beforeMount () {},
  mounted () {},
  activated () {}
}
</script>
<style lang="less" scoped>
.history_query_wrapper{
  position: relative;
  .basic_info_wrapper{
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    height: calc(100% - 14px);
    background-color: #ffffff;
    z-index: 999;
  }
  .hehe-enter,.hehe-leave-to{
      opacity: 0;
  }
  .hehe-enter-to,.hehe-leave{
      opacity: 1;
  }
  .hehe-enter-active,.hehe-leave-active{
      transition: all 300ms;
  }
  .table_wrapper{
    margin-top: 20px;
    background:rgba(255,255,255,1);
    box-shadow:0px 3px 10px 0px rgba(95,122,151,0.13);
    border-radius:4px;
    padding: 30px 40px;
  }
}
</style>
<style lang="less">
.history_query_wrapper{
  // .ant-table-expand-icon-th{
  //   display: none;
  // }
  // .ant-table-row-expand-icon-cell{
  //   display: none;
  // }
  .ant-table-row td{
    background: #ffffff;
  }
  // tr.ant-table-expanded-row, tr.ant-table-expanded-row:hover:first-child td{
  //   display: none;
  // }
  tbody > .ant-table-expanded-row > td:first-child{
    background: #ffffff;
  }
}
</style>
